<!--
 * @Date: 2023-02-09 16:57:26
 * @LastEditTime: 2023-03-10 18:09:18
 * @FilePath: /hash-guess-game/src/views/bonusList/bonusList.vue
 * 介绍:分红列表
-->

<script lang="ts" setup>
import { TagEmun } from "@@/components/Tag";
import { formatNumber } from "@@/utils/tools/tools";
import dayjs from "dayjs";
import { t } from "@@/hooks/useI18n";
import {
  apiGameTimeBonusList,
  GameTimeBonusList,
  apiGameVehicleBonusList,
  apiBonusList,
  BonusList,
  GameVehicleBonusList,
} from "@@/api/module/bonusList";
import useBalanceStore from "@@/store/useBalanceStore";
import globalEnum from "@@/hooks/globalEnum";
const balanceStore = useBalanceStore();
const { coinEnum } = storeToRefs(balanceStore);

function getCoinEnum(): TagEmun {
  return coinEnum.value.map((val) => {
    return {
      text: val.code,
      value: val.id,
      style: {
        backgroundColor:
          globalEnum.coinColor[val.code as keyof typeof globalEnum.coinColor],
      },
    };
  });
}
const tabs = [
  {
    title: t("fen-hong-lie-biao"),
    key: 0,
    api: apiBonusList,
  },
  {
    title: t("sai-shi-fen-hong"),
    key: 1,
    api: apiGameTimeBonusList,
  },
  {
    title: t("sai-che-fen-hong"),
    key: 1,
    api: apiGameVehicleBonusList,
  },
];
const currentTab = ref<StrNumber>();
</script>

<template>
  <div class="bonusList auto-mt">
    <h4 class="page_title">{{ $t("fen-hong-lie-biao") }}</h4>
    <Tabs v-model:active="currentTab">
      <template #nav-bottom>
        <Card gap="solid">
          <div class="list_title list-layout">
            <h4>{{ $t("shi-jian") }}</h4>
            <h4>{{ $t("shu-liang") }}</h4>
            <h4>{{ $t("bi-zhong") }}</h4>
          </div>
        </Card>
      </template>
      <VanTab
        v-for="tab in tabs"
        :title="$t(tab.title)"
        :name="tab.key"
        :key="tab.key"
      >
        <Card>
          <PagingList :api="tab.api">
            <template
              #item="{
                item,
              }: {
                item:
                  | BonusList.ResItem
                  | GameTimeBonusList.ResItem
                  | GameVehicleBonusList.ResItem,
              } & { item: unknownObj }"
            >
              <div class="List_item list-layout">
                <div style="font-size: 0.8em">
                  {{ dayjs(item.created_at).format("MM-DD HH:mm:ss") }}
                </div>
                <Tag>
                  {{ formatNumber(item.number as any, 4) }}
                </Tag>
                <Tag :value="item.coin?.id as any" :enum="getCoinEnum()"> </Tag>
              </div>
            </template>
          </PagingList>
        </Card>
      </VanTab>
    </Tabs>
  </div>
</template>

<style lang="less" scoped>
.page_title {
  text-align: center;
  margin-bottom: var(--gap-md);
}

.PagingList {
  padding: var(--gap-sm);
  .List_item {
    padding: var(--gap-md) 0;
    border-bottom: 2rem solid var(--C-T1);
  }
}
.Tabs {
  .Card {
    margin-top: var(--gap-sm);
  }
}
.listLayout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--gap-sm);
}
</style>
